var sortDetailsData = null;
var hotZoneData = null;
var moviesData = null;
var hotelData = null;
var meiTuanNavData = null;
var footerData = null;

import {
  getSortDetails,
  getHotZone,
  getMovies,
  getHotels,
  getMeiTuanNav,
  getFooter,
} from "./api/api.js";
var lun, movielun;
// 创建节点初始化
function createInit() {
  createSortDetails();
  createMovies();
  createHotel();
  createMeiTunNav();
  createFooter();
}

//创建一个包含指定文本内容的文本节点
function getTextNode(text) {
  return document.createTextNode(text);
}

// 网页加载完毕后开始获取数据
window.onload = function () {
  //获取分类导航数据
  Promise.all([
    getSortDetails(),
    getHotZone(),
    getMovies(),
    getHotels(),
    getMeiTuanNav(),
    getFooter(),
  ])
    .then(function (results) {
      sortDetailsData = results[0].data;
      hotZoneData = results[1].data;
      moviesData = results[2].data;
      hotelData = results[3].data;
      meiTuanNavData = results[4].data;
      footerData = results[5].data;
      console.log("sortDetailsData==>", sortDetailsData);
      console.log("hotZoneData==>", hotZoneData);
      console.log("moviesData==>", moviesData);
      console.log("hotelData==>", hotelData);
      console.log("meiTuanNavData==>", meiTuanNavData);
      console.log("footerData==>", footerData);
      createInit();
      mouseEventInit();
    })
    .catch(function (error) {
      console.error(error);
    });
};

/**
 * 鼠标事件
 */
function mouseEventInit() {
  //全部分类侧边栏显示隐藏
  var dropright = document.getElementById("dropright");
  var droprightLi = dropright.getElementsByClassName("droprightli");
  var sortdetails = document.getElementsByClassName("sort-details");
  // console.log(sortdetails);

  //循环遍历
  for (let i = 0; i < droprightLi.length; i++) {
    droprightLi[i].onmouseover = function () {
      // console.log("鼠标在" + i);
      if (sortdetails[i] != null)
        sortdetails[i].classList.remove("display_none");
    };
    droprightLi[i].onmouseout = function () {
      // console.log("鼠标不在" + i);
      if (sortdetails[i] != null) sortdetails[i].classList.add("display_none");
    };
  }

  //轮播区域的js代码
  var carousel = document.getElementById("carousel");
  var left = document.getElementById("left");
  var right = document.getElementById("right");
  var image = document.getElementById("image");
  var numList = document.getElementById("number").getElementsByTagName("li");
  var links = document.getElementById("links");

  var add = 1;

  //添加图片
  image.src = hotZoneData.carousel[0].imgUrl;
  numList[0].style.background = "#fff";
  links.href = hotZoneData.carousel[0].url;
  links.target = '_blank'

  //鼠标移入显示左右箭头
  carousel.onmouseover = function () {
    left.style.display = "block";
    right.style.display = "block";
    clearInterval(lun);
  };
  //鼠标移出隐藏左右箭头
  carousel.onmouseout = function () {
    left.style.display = "none";
    right.style.display = "none";
    carouselLb();
  };
  //轮播切换图片
  function carouselLb() {
    lun = setInterval(function () {
      add = add + 1;
      if (add > 6) {
        add = 1;
      }
      image.src = hotZoneData.carousel[add - 1].imgUrl;
      // console.log(hotZoneData.carousel[add - 1].imgUrl);
      var x = add - 1;
      links.href = hotZoneData.carousel[add - 1].url;
      for (var i = 0; i < numList.length; i++) {
        numList[i].style.background = "#3e3e3e";
        if (x == i) {
          numList[i].style.background = "#fff";
        }
      }
    }, 3000);
  }
  carouselLb();
  //点击左右箭头切换图片
  left.onclick = function () {
    add = add - 1;
    if (add < 1) {
      add = 6;
    }
    image.src = hotZoneData.carousel[add - 1].imgUrl;
    // console.log(hotZoneData.carousel[add - 1].imgUrl);
    links.href = hotZoneData.carousel[add - 1].url;
    var x = add - 1;
    for (var i = 0; i < numList.length; i++) {
      numList[i].style.background = "#3e3e3e";
      if (x == i) {
        numList[i].style.background = "#fff";
      }
    }
  };
  right.onclick = function () {
    add = add + 1;
    if (add > hotZoneData.carousel.length) {
      add = 1;
    }
    image.src = hotZoneData.carousel[add - 1].imgUrl;
    // console.log(hotZoneData.carousel[add - 1].imgUrl);
    links.href = hotZoneData.carousel[add - 1].url;
    var x = add - 1;
    for (var i = 0; i < numList.length; i++) {
      numList[i].style.background = "#3e3e3e";
      if (x == i) {
        numList[i].style.background = "#fff";
      }
    }
  };
  //鼠标滑过li的时候切换图片
  for (var i = 0; i < numList.length; i++) {
    numList[i].onmouseover = function () {
      add = this.innerHTML;
      //console.log(add);
      image.src = hotZoneData.carousel[add - 1].imgUrl;
      // console.log(hotZoneData.carousel[add - 1].imgUrl);
      links.href = hotZoneData.carousel[add - 1].url;
      var x = add - 1;
      for (var i = 0; i < numList.length; i++) {
        numList[i].style.background = "#3e3e3e";
        if (x == i) {
          numList[i].style.background = "#fff";
        }
      }
    };
  }

  let bodyer_center = document.getElementById("bodyer-center");
  let ad = bodyer_center.getElementsByClassName("ad");
  for (let i = 0; i < 4; i++) {
    ad[i].style.background = "url(" + hotZoneData.ad[i].imgUrl + ") cover";
    console.log(ad[i])
  }
  // console.log("ad===>", ad);
  //猫眼电影特效

  //选项卡切换和三角形的显示隐藏
  var movieTab = document.getElementById("movie-tab");
  var movieTabLi = movieTab.getElementsByTagName("li");
  var movieTabTriangle = movieTab.getElementsByClassName("triangle ");
  var movieShow = document.getElementById("movie-show");
  var movieShowClass = movieShow.getElementsByClassName("moviehot");
  var movieLeft = document.getElementById("movieleft");
  var movieRight = document.getElementById("movieright");
  var nowhot = document.getElementById("nowhot");
  var quick = document.getElementById("quick");

  movieTabLi[1].onmouseover = function () {
    movieShowClass[0].style.display = "block";
    movieShowClass[1].style.display = "none";
    movieTabTriangle[0].style.display = "block";
    movieTabTriangle[1].style.display = "none";
  };
  movieTabLi[2].onmouseover = function () {
    movieShowClass[0].style.display = "none";
    movieShowClass[1].style.display = "block";
    movieTabTriangle[1].style.display = "block";
    movieTabTriangle[0].style.display = "none";
  };
  //左右箭头的显示隐藏
  movieShow.onmouseover = function () {
    movieLeft.style.display = "block";
    movieRight.style.display = "block";
  };
  movieShow.onmouseout = function () {
    movieLeft.style.display = "none";
    movieRight.style.display = "none";
  };
  //左右箭头被点击切换图片
  var num = 0;
  movieright.onclick = function () {
    if (nowhot.style.display == "block") {
      // console.log(1);
      movielun = setInterval(function () {
        num -= 20;
        nowhot.style.left = num + "px";
        if (num <= -1200) {
          clearInterval(movielun);
          movieright.disabled = "disabled";
          movieleft.disabled = false;
          // movieright.innerHTML = "&gt;";
          // movieleft.innerHTML = "&lt;";
        }
      }, 20);
    } else {
      movielun = setInterval(function () {
        num -= 20;
        quick.style.left = num + "px";
        if (num <= -1200) {
          clearInterval(movielun);
          movieright.disabled = "disabled";
          movieleft.disabled = false;
          // movieright.innerHTML = "&gt;";
          // movieleft.innerHTML = "&lt;";
        }
      }, 20);
    }
  };
  movieleft.onclick = function () {
    if (nowhot.style.display == "block") {
      // console.log(1);
      movielun = setInterval(function () {
        num += 20;
        nowhot.style.left = num + "px";
        if (num >= 0) {
          clearInterval(movielun);
          movieright.disabled = false;
          movieleft.disabled = "disabled";
          // movieright.innerHTML = "&gt;";
          // movieleft.innerHTML = "&llt;";
        }
      }, 20);
    } else {
      movielun = setInterval(function () {
        num += 20;
        quick.style.left = num + "px";
        if (num >= 0) {
          clearInterval(movielun);
          movieright.disabled = false;
          movieleft.disabled = "disabled";
          // movieright.innerHTML = "&gt;";
          // movieleft.innerHTML = "&lt;";
        }
      }, 20);
    }
  };
  //推荐民宿的显示隐藏
  var hotelTab = document.getElementById("hotel-tab");
  var hotelTabLi = hotelTab.getElementsByTagName("li");

  var container = document.getElementById("container");
  var containerDiv = container.getElementsByClassName("tablist");
  for (var i = 0; i < hotelTabLi.length; i++) {
    hotelTabLi[i].index = i;
    hotelTabLi[i].onclick = function () {
      for (var i = 0; i < hotelTabLi.length; i++) {
        hotelTabLi[i].className = "";
        containerDiv[i].style.display = "none";
      }
      this.className = "act";
      containerDiv[this.index].style.display = "block";
    };
    for (var m = 1; m < hotelTabLi.length; m++) {
      hotelTabLi[m].className = "";
      containerDiv[m].style.display = "none";
    }
  }
}

// 创建分类导航栏
function createSortDetails() {
  let dropright = document.getElementById("dropright");
  for (let i = 0; i < sortDetailsData.length; i++) {
    // 标题栏
    let droprightli = document.createElement("li");
    droprightli.classList.add("droprightli");

    // 图标
    let ico = document.createElement("i");
    ico.classList.add("iconfont");
    ico.classList.add(sortDetailsData[i].icon_name);
    ico.style.color = sortDetailsData[i].icon_color;
    droprightli.appendChild(ico);

    // 标题
    let title = document.createElement("a");
    title.href = sortDetailsData[i].url;
    title.target = "_blank";
    title.appendChild(getTextNode(sortDetailsData[i].sort_title));
    droprightli.appendChild(title);

    let b = document.createElement("b");
    // let  b_txt = document.createTextNode('&gt;');
    b.appendChild(getTextNode(">"));
    droprightli.appendChild(b);
    // 详情
    let sort_details = document.createElement("div");
    sort_details.setAttribute("id", "sort-details");
    sort_details.classList.add("sort-details");
    sort_details.classList.add("display_none");

    // 创建分类列表
    for (let j = 0; j < sortDetailsData[i].sort_list.length; j++) {
      let sort_details_item = document.createElement("div");
      let sort_details_top = document.createElement("div");
      // 分类详情左上角标题
      let sort_details_top_title = document.createElement("a");
      sort_details_top_title.href = sortDetailsData[i].sort_list[j].url;
      sort_details_top_title.appendChild(
        getTextNode(sortDetailsData[i].sort_list[j].title)
      );
      sort_details_top_title.target = "_blank";
      let more = document.createElement("a");
      more.appendChild(getTextNode("更多>"));
      more.target = "_blank";
      more.href = sortDetailsData[i].url;
      sort_details_top.appendChild(sort_details_top_title);
      sort_details_top.appendChild(more);
      sort_details_top.classList.add("sort-details-top");
      sort_details_item.appendChild(sort_details_top);

      let hr = document.createElement("hr");
      // 分割线
      sort_details_item.appendChild(hr);
      // 分类详情列表
      let ul = document.createElement("ul");
      for (
        let k = 0;
        k < sortDetailsData[i].sort_list[j].sort_details.length;
        k++
      ) {
        let li = document.createElement("li");
        let a = document.createElement("a");
        a.href = sortDetailsData[i].sort_list[j].sort_details[k].url;
        a.appendChild(
          getTextNode(sortDetailsData[i].sort_list[j].sort_details[k].name)
        );
        a.target = "_blank";
        // console.log(res.data[i].sort_list[j].sort_details[k].name)
        li.appendChild(a);
        ul.appendChild(li);
      }
      sort_details_item.appendChild(ul);
      sort_details.appendChild(sort_details_item);
      droprightli.appendChild(sort_details);
    }
    dropright.appendChild(droprightli);
  }
}

function createMovies() {
  let nowhot = document.getElementById("nowhot");
  moviesData.currently_bing.forEach((ele) => {
    let movie_item = document.createElement("a");
    movie_item.classList.add("movie-item");
    movie_item.href = ele.url;
    movie_item.target = "_blank";
    if (ele.tag != "") {
      let tag = document.createElement("div");
      tag.appendChild(getTextNode(ele.tag));
      tag.classList.add("movie-item-tag");
      movie_item.appendChild(tag);
    }
    let img = document.createElement("img");
    img.src = ele.imgUrl;
    img.alt = "电影-" + ele.title;
    movie_item.appendChild(img);
    let movie_item_bottom = document.createElement("div");
    movie_item_bottom.classList.add("movie-item-bottom");

    let movie_item_bottom_left = document.createElement("div");
    movie_item_bottom_left.classList.add("movie-item-bottom-left");

    let score = document.createElement("div");
    score.classList.add("score");
    if (ele.status == "购票") {
      score.appendChild(getTextNode("观众评"));
      let span = document.createElement("span");
      span.appendChild(getTextNode(ele.num));
      score.appendChild(span);
    } else {
      let span = document.createElement("span");
      span.appendChild(getTextNode(ele.num));
      score.appendChild(span);
      score.appendChild(getTextNode("人想看"));
    }
    movie_item_bottom_left.appendChild(score);

    let title = document.createElement("div");
    title.classList.add("title");
    title.appendChild(getTextNode(ele.title));
    movie_item_bottom_left.appendChild(title);
    movie_item_bottom.appendChild(movie_item_bottom_left);
    if (ele.status != "") {
      let a = document.createElement("a");
      a.href = ele.url;
      a.appendChild(getTextNode(ele.status));
      a.target = "_blank";
      movie_item_bottom.appendChild(a);
    }
    movie_item.appendChild(movie_item_bottom);
    nowhot.appendChild(movie_item);
  });
  let quick = document.getElementById("quick");

  moviesData.upcoming.forEach((ele) => {
    let movie_item = document.createElement("div");
    movie_item.classList.add("movie-item");
    if (ele.tag != "") {
      let tag = document.createElement("div");
      tag.appendChild(getTextNode(ele.tag));
      tag.classList.add("movie-item-tag");
      movie_item.appendChild(tag);
    }
    let img = document.createElement("img");
    img.src = ele.imgUrl;
    img.alt = "电影" + ele.title;
    movie_item.appendChild(img);
    let movie_item_bottom = document.createElement("div");
    movie_item_bottom.classList.add("movie-item-bottom");

    let movie_item_bottom_left = document.createElement("div");
    movie_item_bottom_left.classList.add("movie-item-bottom-left");

    let score = document.createElement("div");
    score.classList.add("score");
    if (ele.status == "购票") {
      score.appendChild(getTextNode("观众评"));
      let span = document.createElement("span");
      span.appendChild(getTextNode(ele.num));
      score.appendChild(span);
    } else {
      let span = document.createElement("span");
      span.appendChild(getTextNode(ele.num));
      score.appendChild(span);
      score.appendChild(getTextNode("人想看"));
    }
    movie_item_bottom_left.appendChild(score);
    let title = document.createElement("div");
    title.classList.add("title");
    title.appendChild(getTextNode(ele.title));
    movie_item_bottom_left.append(title);
    movie_item_bottom.appendChild(movie_item_bottom_left);
    if (ele.status != "") {
      let a = document.createElement("a");
      a.href = ele.url;
      a.appendChild(getTextNode(ele.status));
      movie_item_bottom.appendChild(a);
    }
    movie_item.appendChild(movie_item_bottom);
    quick.appendChild(movie_item);
  });
}

function createHotel() {
  // console.log(hotelData)

  let flag = false;
  let hotel_tab = document.getElementById("hotel-tab");
  hotelData.forEach((item) => {
    let li = document.createElement("li");
    li.appendChild(getTextNode(item.city));
    if (!flag) li.classList.add("act");
    hotel_tab.appendChild(li);
  });

  flag = false;
  let hotelContainer = document.getElementById("container");
  hotelData.forEach((ele) => {
    let tablist = document.createElement("div");
    tablist.classList.add("tablist");
    ele.hotel_list.forEach((hotel_item) => {
      let item = document.createElement("div");
      tablist.appendChild(item);

      let a = document.createElement("a");
      a.href = hotel_item.url;
      a.target = "_blank";
      let img = document.createElement("img");
      img.src = hotel_item.imgUrl;
      a.appendChild(img);
      item.appendChild(a);
      let span = document.createElement("span");
      span.appendChild(getTextNode(hotel_item.title));
      item.appendChild(span);
      let p = document.createElement("p");
      p.appendChild(
        getTextNode(
          hotel_item.sub_title.type +
            "丨" +
            hotel_item.sub_title.capacity +
            "丨" +
            hotel_item.sub_title.position
        )
      );
      item.appendChild(p);
      let b = document.createElement("b");
      b.appendChild(getTextNode("￥" + hotel_item.price));
      item.appendChild(b);
    });
    if (flag) tablist.classList.add("disnone");
    flag = true;
    hotelContainer.appendChild(tablist);
  });
}

function createMeiTunNav() {
  let navbar = document.getElementById("navbar");
  meiTuanNavData.forEach((item) => {
    let title = document.createElement("div");
    title.appendChild(getTextNode(item.title));
    title.classList.add("navbar-center-title");
    navbar.appendChild(title);
    let city = document.createElement("div");
    city.classList.add("city");
    let ul = document.createElement("ul");
    item.list.forEach((c) => {
      let li = document.createElement("li");
      li.appendChild(getTextNode(c.title));
      li.addEventListener("click", function () {
        window.location.href = c.url;
      });
      ul.appendChild(li);
    });
    city.appendChild(ul);
    navbar.appendChild(city);
  });
}

function createFooter() {
  let footer_list = document.getElementById("footer_list");
  footerData.top.forEach((ele) => {
    let li = document.createElement("li");
    let p = document.createElement("p");
    p.appendChild(getTextNode(ele.title));
    li.appendChild(p);
    ele.list.forEach((item) => {
      let a = document.createElement("a");
      a.href = item.url;
      a.target = "_blank";
      a.appendChild(getTextNode(item.title));
      li.appendChild(a);
    });
    footer_list.appendChild(li);
  });

  let footer_bottom_left = document.getElementById("footer_bottom_left");
  footerData.beian.left.list.forEach((ele) => {
    let a = document.createElement("a");
    a.href = ele.url;
    a.appendChild(getTextNode(ele.title));
    a.target = "_blank";
    footer_bottom_left.appendChild(a);
  });
}
